<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<html>
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="_csrf" content="${_csrf.token}"/>
    <meta name="_csrf_header" content="${_csrf.headerName}"/>
    <link href="<c:url value="/resources/admin/css/bootstrap.min.css"/>" rel="stylesheet"/>
    <link href="<c:url value="/resources/admin/bootstrap-table/css/bootstrap-table.css"/>" rel="stylesheet"/>
	<!-- Custom CSS -->
    <link href="<c:url value="/resources/admin/css/sb-admin.css"/>" rel="stylesheet"/>
    <!-- Custom Fonts -->
    <link href="<c:url value="/resources/admin/font-awesome-4.1.0/css/font-awesome.min.css"/>" rel="stylesheet" type="text/css"/>
	<style>
    	.happyhome-margin-left{
    		margin-left: 3px;
    	}
    </style>
  </head>
  <body>
  	<c:url value="/j_spring_security_logout" var="logoutUrl" />
	<form action="${logoutUrl}" method="post" id="logoutForm" style="display:none;">
		<input type="hidden" name="${_csrf.parameterName}"
			value="${_csrf.token}" />
	</form>
    <script>
		function formSubmit() {
			document.getElementById("logoutForm").submit();
		}
	</script>
		<div id="wrapper">
			<!-- Navigation -->
			<%@ include file="/WEB-INF/pages/admin/navigation.jsp" %>
			<div id="page-wrapper">
				 <div class="container-fluid">
				 	<!-- Page Heading -->
	                <div class="row">
	                    <div class="col-lg-12">
	                        <ol class="breadcrumb">
	                            <li class="active">
	                                <i class="fa fa-dashboard"></i> LIST ROOMS
	                            </li>
	                        </ol>
	                    </div>
	                </div>
	                <!-- /.row -->
	                <div class="row">
	                    <div class="col-lg-12">
	                        <div class="panel panel-default">
	                            <div class="panel-heading">
	                                <h3 class="panel-title"><i class="fa fa-money fa-fw"></i> LIST ROOMS</h3>
	                            </div><!-- panel-heading -->
	                            <div class="panel-body">
	                            	<div class="col-lg-12">      
	                            		<button type="button" class="btn btn-default">
											<span class="glyphicon glyphicon-remove"></span> 
											<spring:message code="deleteAll" text="Delete All" />
										</button>   
			                            <button type="button" class="btn btn-default" id="get-selections">
			                            	<span class="glyphicon glyphicon-film"></span>
			                            	<spring:message code="makePlash" text="Make Plash" />
			                            </button>
			                        </div><!-- /col-lg-12 --> 
			                        
									<table data-toggle="table" data-url="getDataRooms" data-height="299" data-search="true" id="table-methods-table">
									    <thead>
									    <tr>
									        <th data-field="state" data-checkbox="true"></th>
									        <th data-field="isDisplay" data-formatter="isDisplayFormatter" data-sortable="true">
									        	<spring:message code="isDisplay" text="isDisplay" />
									        </th>
									        <th data-field="nameRoom" data-sortable="true">
									        	<spring:message code="nameRoom" text="NAMEROOM" />
									        </th>
									        <th data-field="house" data-sortable="true">
									        	<spring:message code="house" text="HOUSE" />
									        </th>
									        <th data-field="sqft" data-sortable="true">
									        	<spring:message code="sqft" text="SQFT" />
									        </th>
									        <th data-field="depositRoom" data-sortable="true">
									        	<spring:message code="depositRoom" text="DEPOSITROOM" />
									        </th>
									        <th data-field="priceRoom" data-sortable="true">
									        	<spring:message code="priceRoom" text="PRICEROOM" />
									        </th>
									        <th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents">Item Operate</th>
									    </tr>
									    </thead>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		        <h4 class="modal-title" id="myModalLabel">
		        	<spring:message code="message.FormNotification" text="notification"/>
		        </h4>
		      </div>
		      <div class="modal-body">
		        	<p class="error-text" id="modal-body-notifycation"/>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-primary" data-dismiss="modal">
		        	<spring:message code="message.closeButton" text="close"/>
		        </button>
		      </div>
		    </div>
		  </div>
		</div>
		<!-- /modal -->
		<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="<c:url value="/resources/admin/js/bootstrap.min.js"/>"></script>
		<script src="<c:url value="/resources/admin/bootstrap-table/bootstrap-table.js"/>"></script>
		<script>
			function makeDateFormatter(value, row) {
		    	var makeDate = new Date(row.makeDate);
		    	var makeDateValue = (makeDate.getMonth() + 1) + '/' + makeDate.getDate() + '/' +  makeDate.getFullYear();
	            return makeDateValue;
		    }
			
		    function isDisplayFormatter(value, row) {
		    	var icon = row.isDisplay ? 'glyphicon-film' : '';
	
	            return '<div class="col-md-1 col-md-offset-3"><i class="glyphicon ' + icon + '"></i></div>';
		    }
		    
		    function operateFormatter(value, row, index) {
		        return [
		            '<a class="edit happyhome-margin-left" href="javascript:void(0)" title="Edit Information">',
		                '<i class="glyphicon glyphicon-edit"></i>',
		            '</a>',
		            '<a class="editImage happyhome-margin-left" href="javascript:void(0)" title="Edit Image">',
		                '<i class="glyphicon glyphicon-picture"></i>',
		            '</a>',
		            '<a class="markImage happyhome-margin-left" href="javascript:void(0)" title="Mark Image">',
		                '<i class="glyphicon glyphicon-asterisk"></i>',
		            '</a>',
		            '<a class="remove happyhome-margin-left" href="javascript:void(0)" title="Remove">',
		                '<i class="glyphicon glyphicon-remove"></i>',
		            '</a>'
		        ].join('');
		    }

		    window.operateEvents = {
		        'click .edit': function (e, value, row, index) {
		            document.location.href = "${pageContext.request.contextPath}/admin/rooms/edit/"+ row.idRoom; 
		        },
		        'click .editImage': function (e, value, row, index) {
		        	document.location.href = "${pageContext.request.contextPath}/admin/rooms/uploadImages?roomId="+ row.idRoom; 
		        },
		        'click .markImage': function (e, value, row, index) {
		            document.location.href = "${pageContext.request.contextPath}/admin/rooms/markImage/"+ row.idRoom; 
		        },
		        'click .remove': function (e, value, row, index) {
		            alert('You click remove icon, row: ' + JSON.stringify(row));
		            console.log(value, row, index);
		        }
		    };
		</script>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script>
	 	// init table use data
	    $table = $('#table-methods-table').bootstrapTable();
	
	    $('#get-selections').click(function() {
	    	var form = $table.bootstrapTable('getSelections');
	    	if(form.length > 0){
		        var value = "";
		        for (var i = 0; i < form.length; i++) { 
		        	value += form[i].idRoom + ",";
		        }
		        var parameterValue = {
		        	      "listIdRooms" : value
		        	   };
		        $.ajax({
		   			url: "${pageContext.request.contextPath}/admin/rooms/setDisplayCavas",
			        data: parameterValue,
		         	type: "POST",
		         
			   		beforeSend: function (xhr){ 
			   	        xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content")); 
			   	    },
		   			success: function (response) {
		   				if(response == "fail"){
		   					document.getElementById("modal-body-notifycation").innerHTML = '<i class="icon-ok-sign modal-icon"></i> Number choosen greater than max number of occurrences!';
			   				$("#myModal").modal('show'); 
		   				}else{
			   				document.getElementById("modal-body-notifycation").innerHTML = '<i class="icon-ok-sign modal-icon"></i> Make plash successfully!';
			   				$("#myModal").modal('show'); 
		   				} 
		    		},
		   			error: function(jqXHR, textStatus, errorThrown){
		   				alert(textStatus);
		   			}
		   		});
	    	}
	    });
	</script>
  </body>
</html>
